﻿<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <title>数据质量管理系统</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <!-- 引入样式 -->
    <link rel="stylesheet" th:href="@{/Vue/ElemtUI/ElementIndex.css}">
    <style>
        .layui-header {
            background-color: #fff !important;
            box-shadow: rgba(0, 21, 41, 0.17) 0 1px 4px 0;
        }

        .layui-logo {
            color: rgba(0, 0, 0, 0.85) !important;
        }

        .layui-bg-black {
            background-color: #fff !important;
            box-shadow: rgba(0, 21, 41, 0.17) 0 1px 4px 0;
        }

        .layui-nav-item {
            min-width: 100px;
            text-align: center;
        }

        .layui-nav-item:hover {
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="layui-layout-admin" id="app" onload="document.getElementById('indexFirst').click();">
    <!--头部-->
    <div class="layui-header">
        <ul class="layui-nav layui-bg-gray">
            <li class="layui-nav-item"><a href="">数据质量管理系统</a></li>
            <li
                    :class="{'layui-this': item.isThis}"
                    @click="handleSelectMenu(index)"
                    class="layui-nav-item"
                    v-for="(item,index) in menuData"
            >
                {{item.name}}
            </li>
        </ul>
    </div>
    <!--左侧-->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!--            <ul class="layui-nav layui-nav-tree layui-inline layui-bg-gray" lay-filter="demo"-->
            <!--                style="margin-right: 10px;" v-if="menuData.length > 0">-->
            <!--                <li class="layui-nav-item layui-nav-itemed" v-for="item in menuData[menuIndex].children">-->
            <!--                    <a :data-id="item.id" :data-title="item.name" class="subMenu" data-type="toAdd"-->
            <!--                       data-url="/echarts"-->
            <!--                       href="javascript:;"-->
            <!--                       v-if="item.children.length === 0">-->
            <!--                        &lt;!&ndash;<i class="el-icon-s-operation"></i>&ndash;&gt;-->
            <!--                        &nbsp;{{item.name}}-->
            <!--                    </a>-->
            <!--                    <a href="javascript:;" v-if="item.children.length > 0">-->
            <!--                        &lt;!&ndash;                        <i class="el-icon-s-order"></i>&ndash;&gt;-->
            <!--                        &nbsp;{{item.name}}-->
            <!--                    </a>-->
            <!--                    <dl class="layui-nav-child" v-if="item.children.length > 0">-->
            <!--                        <dd v-for="_item in item.children">-->
            <!--                            <a :data-id="_item.id" :data-title="_item.name" :data-url="_item.url" class="subMenu"-->
            <!--                               data-type="toAdd" href="javascript:;">-->
            <!--                                &lt;!&ndash;                                <i class="el-icon-s-grid"></i>&ndash;&gt;-->
            <!--                                &nbsp;{{_item.name}}-->
            <!--                            </a>-->
            <!--                        </dd>-->
            <!--                    </dl>-->
            <!--                </li>-->
            <!--            </ul>-->
        </div>
    </div>
    <!--中间主体-->
    <div class="layui-body" id="container">
        <div class="layui-tab" lay-allowClose="true" lay-filter="tabs">
            <ul class="layui-tab-title">
            </ul>
            <div class="layui-tab-content">
            </div>
        </div>
    </div>
</div>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/Vue/vue.js}"></script>
<!--Axios请求-->
<script charset="utf-8" th:src="@{/Vue/axios.min.js}" type="text/javascript"></script>
<script>
    function layuiInit(data) {
        layui.use(['element'], function () {
            const element = layui.element;
            // var layer = layui.layer;
            const $ = layui.$;
            // Data为菜单数据动态添加
            let html = '';
            html += '<ul class="layui-nav layui-nav-tree layui-inline layui-bg-gray"  lay-filter="demo">';
            $.each(data, function (i, item) {
                html = html + '<li class="layui-nav-item">';
                console.log(item, 'item')
                if (item.children != "" && item.children.length > 0) {
                    html += '<a href="javascript:;" data-type="toAdd" data-title="' + item.name + '" data-url="' + item.url + '" data-id="' + item.id + '">' +
                        '<cite>' + item.name + '</cite></a>';
                    html += '<dl class="layui-nav-child">';
                    $.each(item.children, function (j, item2) {
                        html += '<dd>'
                        if (item2.children != "" && item2.children.length > 0) {
                            html += '<a href="javascript:;" data-type="toAdd" data-title="' + item2.name + '" data-url="' + item2.url + '" ' +
                                'data-id="' + item2.id + '">' +
                                '<cite>' + item2.name + '</cite></a>';
                            html += '<ol class="layui-nav-child">';
                            $.each(item2.children, function (k, item3) {
                                html += '<li>' +
                                    '<a href="javascript:;" data-type="toAdd" data-title="' + item3.name + '" class="subMenu" data-url="' + item3.url + '" data-id="' + item3.id + '">' +
                                    '<cite>' + item3.name + '</cite>' +
                                    '</a>' +
                                    '</li>';
                            });
                            html += '</ol>';
                        } else {
                            html += '<a href="javascript:;" data-type="toAdd" data-title="' + item2.name + '" class="subMenu" data-url="' + item2.url + '" ' +
                                'data-id="' + item2.id + '">' +
                                '<cite>' + item2.name + '</cite></a>';
                        }
                    });
                    html += '</dl>';
                } else {
                    html += '<a href="javascript:;" data-type="toAdd" data-title="' + item.name + '" class="subMenu" data-url="' + item.url + '" data-id="' + item.id + '">' +
                        '<cite>' + item.name + '</cite></a>';
                }
                html += '</li>';
            });
            html += '</ul>';
            $(".layui-side-scroll").empty();
            $(".layui-side-scroll").append(html);
            element.init();
            // 配置tab实践在下面无法获取到菜单元素
            $('.subMenu').on('click', function () {
                var dataid = $(this);
                //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
                if ($(".layui-tab-title li[lay-id]").length <= 0) {
                    //如果比零小，则直接打开新的tab项
                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
                } else {
                    //否则判断该tab项是否以及存在
                    var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
                    $.each($(".layui-tab-title li[lay-id]"), function () {
                        //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                        if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                            isData = true;
                        }
                    })
                    if (isData == false) {
                        //标志为false 新增一个tab项
                        active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
                    }
                }
                //最后不管是否新增tab，最后都转到要打开的选项页面上
                active.tabChange(dataid.attr("data-id"));
            });

            var active = {
                //在这里给active绑定几项事件，后面可通过active调用这些事件
                tabAdd: function (url, id, name) {
                    //新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
                    //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
                    //tabs:中间主体的fiter名
                    console.log(url, id, name, 'ssss')
                    element.tabAdd('tabs', {
                        title: name,
                        content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url +
                            '" style="width:100%;height:99%;"></iframe>',
                        id: id //规定好的id
                    })
                    FrameWH(); //计算ifram层的大小
                },
                tabChange: function (id) {
                    //切换到指定Tab项
                    element.tabChange('tabs', id); //根据传入的id传入到指定的tab项
                },
                tabDelete: function (id) {
                    element.tabDelete("tabs", id); //删除
                }
            };

            function FrameWH() {
                var h = $(window).height();
                $("iframe").css("height", h + "px");
            }
        });
    }

    new Vue({
        el: '#app',
        data: function () {
            return {
                menuData: [],
                menuIndex: 0
            }
        },
        async mounted() {
            axios.get('/qa/getMenuList').then(res => {
                const {data, status} = res
                if (!data || !data.data || data.data.length === 0 || status !== 200) return
                const tempData = data.data
                tempData[0].isThis = true
                this.menuData = tempData
                if (this.menuData.length > 0) {
                    layuiInit(this.menuData[this.menuIndex].children || [])
                }
            })
        },
        methods: {
            handleSelectMenu(index) {
                this.menuData = this.menuData.map(item => {
                    return {
                        ...item,
                        isThis: false
                    }
                })
                this.menuData[index].isThis = true
                this.menuIndex = index
                layuiInit(this.menuData[this.menuIndex].children || [])
            }
        }
    })
</script>
</body>
</html>